<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>elementUI 的表格标签 </title>

    <!--引入Vue组件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!--引入Axios组件，用来发送异步http请求的-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<!--
        el-table  标签
           data  展示的数据  (这里的数据是Vue中的data中的数据(Array))
           style 样式

        <el-table-column>  列
              label  列名
              prop   数据中的 key
              width  宽度

         elementUI 的操作步骤:
         1、引入 css、js
         2、初始化Vue
         3、去复制组件过来
         4、Vue data中的数据准备好
         5、修改elementUI的组件、填充数据
-->
<div id="app">

    <el-table
            :data="users"
            border
            style="width: 100%">
        <el-table-column
                label="姓名"
                prop="name"
                width="180">
        </el-table-column>
        <el-table-column
                label="电话"
                prop="tel"
                width="180">
        </el-table-column>

        <el-table-column
                label="备注"
                prop="remark"
                width="180">
        </el-table-column>
    </el-table>
    <el-button @click="getData()" type="primary">获取数据</el-button>
</div>

<script>

    new Vue({
        el:"#app",
        data:{
           users:[]
        },
        methods:{
            getData(){
                axios.get('data.json').then(resp=>{
                    this.users = resp.data;
                })
            }
        }
    })

</script>

</body>
</html>